<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="css/unis.css">
    <script type="text/javascript" src="../js/template.js"></script>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../js/import-htmt.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
</head>
<body>
<div style="width: 95%; margin: auto" id="childApp">
    <div class=" mt-4 col " style="font-size: 24px">
        Primary Colors
    </div>
    <div class=" mt-4 col " style="font-size: 16px">
        Grey
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%">
                <div class="col-3">
                    <div class="m-0 flex-column">
                        <div class="bg-grey900 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px; border-radius: 12px 12px 0 0 ">
                            <span style="color: white">G900</span>
                            <span style="color: white">#444545</span>
                        </div>
                        <div class="bg-grey700 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: white">G700</span>
                            <span style="color: white">#777879</span></div>
                        <div class="bg-grey500 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: white">G500</span>
                            <span style="color: white">#989A9C</span></div>
                        <div class="bg-grey400 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: white">G400</span>
                            <span style="color: white">#B4B5B5</span></div>
                        <div class="bg-grey300 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: white">G300</span>
                            <span style="color: white">#CECECE</span></div>
                        <div class="bg-grey200 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: #444545">G200</span>
                            <span style="color: #444545">#DADADA</span></div>
                        <div class="bg-grey100 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;border-radius: 0 0 12px 12px "><span style="color: #444545">G100</span>
                            <span style="color: #444545">#ECECEC</span></div>
                    </div>
                </div>
                <div class="col-3 m-0 ">
                    <div class="br-grey900 br-1 br-st mb-1" style="height: 69px; "></div>
                    <div class="br-grey700 br-1 br-st mb-1" style="height: 69px;"></div>
                    <div class="br-grey500 br-1 br-st mb-1" style="height: 69px;"></div>
                    <div class="br-grey400 br-1 br-st mb-1" style="height: 69px;"></div>
                    <div class="br-grey300 br-1 br-st mb-1" style="height: 69px;"></div>
                    <div class="br-grey200 br-1 br-st mb-1" style="height: 69px;"></div>
                    <div class="br-grey100 br-1 br-1 br-st mb-1" style="height: 69px; "></div>
                </div>
                <div class="col-3 m-0 ">
                    <div class="ft-grey900 " style="height: 69px; text-align: center">Font Color</div>
                    <div class="ft-grey700 " style="height: 69px;text-align: center">Font Color</div>
                    <div class="ft-grey500 " style="height: 69px;text-align: center">Font Color</div>
                    <div class="ft-grey400 " style="height: 69px;text-align: center">Font Color</div>
                    <div class="ft-grey300 " style="height: 69px;text-align: center">Font Color</div>
                    <div class="ft-grey200 " style="height: 69px;text-align: center">Font Color</div>
                    <div class="ft-grey100 " style="height: 69px;text-align: center">Font Color</div>
                </div>

            </div>

        </template>
        <template v-slot:htmcode>
            <div class="bg-grey900"></div>
            <div class="bg-grey700"></div>
            <div class="bg-grey500"></div>
            <div class="bg-grey400"></div>
            <div class="bg-grey300"></div>
            <div class="bg-grey200"></div>
            <div class="bg-grey100"></div>


            <div class="br-grey900"></div>
            <div class="br-grey700"></div>
            <div class="br-grey500"></div>
            <div class="br-grey400"></div>
            <div class="br-grey300"></div>
            <div class="br-grey200"></div>
            <div class="br-grey100"></div>


            <div class="ft-grey900"></div>
            <div class="ft-grey700"></div>
            <div class="ft-grey500"></div>
            <div class="ft-grey400"></div>
            <div class="ft-grey300"></div>
            <div class="ft-grey200"></div>
            <div class="ft-grey100"></div>
        </template>
    </dfault-vuew>
    <div class=" mt-4 col " style="font-size: 16px">
        Accent Blue
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%">
                <div class="col-3">
                    <div class="m-0 flex-column">
                        <div class="bg-accentblue900 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px; border-radius:  12px 12px 0 0 "><span style="color: white">B900</span>
                            <span style="color: white;">#488492</span></div>
                        <div class="bg-accentblue700 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: white">B700</span>
                            <span style="color: white">#7FA9B3</span></div>
                        <div class="bg-accentblue600 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: white">B600</span>
                            <span style="color: white">#91B5BE</span></div>

                        <div class="bg-accentblue500 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;">
                            <span style="color: white">B500</span>
                            <span style="color: white">#A3C1C8</span></div>

                        <div class="bg-accentblue400 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span
                                style="color: white">B400</span>
                            <span style="color: white">#B6CED3</span></div>

                        <div class="bg-accentblue200 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span
                                style="color: #488492">B200</span>
                            <span style="color: #488492">#D3E2E5</span></div>

                        <div class="bg-accentblue100 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;border-radius: 0 0 12px 12px "><span style="color: #488492">B100</span>
                            <span style="color: #488492">#E9F0F2</span></div>
                    </div>
                </div>
                <div class="col-3 m-0 ">
                    <div class="br-accentblue900 br-1 br-st mb-1" style="height: 69px;"></div>
                    <div class="br-accentblue700 br-1 br-st mb-1" style="height: 69px;"></div>
                    <div class="br-accentblue600 br-1 br-st mb-1" style="height: 69px;"></div>
                    <div class="br-accentblue500 br-1 br-st mb-1" style="height: 69px;"></div>
                    <div class="br-accentblue400 br-1 br-st mb-1" style="height: 69px;"></div>
                    <div class="br-accentblue200 br-1 br-st mb-1" style="height: 69px;"></div>
                    <div class="br-accentblue100 br-1 br-st mb-1" style="height: 69px; "></div>
                </div>
                <div class="col-3 m-0 ">
                    <div class="ft-accentblue900 " style="height: 69px; text-align: center">Font Color</div>
                    <div class="ft-accentblue700 " style="height: 69px;text-align: center">Font Color</div>
                    <div class="ft-accentblue600 " style="height: 69px;text-align: center">Font Color</div>
                    <div class="ft-accentblue500 " style="height: 69px;text-align: center">Font Color</div>
                    <div class="ft-accentblue400 " style="height: 69px;text-align: center">Font Color</div>
                    <div class="ft-accentblue200 " style="height: 69px;text-align: center">Font Color</div>
                    <div class="ft-accentblue100 " style="height: 69px;text-align: center">Font Color</div>
                </div>

            </div>

        </template>
        <template v-slot:htmcode>
            <div class="bg-accentblue900"></div>
            <div class="bg-accentblue700"></div>
            <div class="bg-accentblue600"></div>
            <div class="bg-accentblue500"></div>
            <div class="bg-accentblue400"></div>
            <div class="bg-accentblue200"></div>
            <div class="bg-accentblue100"></div>

            <div class="br-accentblue900"></div>
            <div class="br-accentblue700"></div>
            <div class="br-accentblue500"></div>
            <div class="br-accentblue400"></div>
            <div class="br-accentblue200"></div>
            <div class="br-accentblue100"></div>


            <div class="ft-accentblue900"></div>
            <div class="ft-accentblue700"></div>
            <div class="ft-accentblue500"></div>
            <div class="ft-accentblue400"></div>
            <div class="ft-accentblue200"></div>
            <div class="ft-accentblue100"></div>
        </template>
    </dfault-vuew>
    <div class=" mt-4 col " style="font-size: 16px">
        Background
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%">
                <div class="col-3">
                    <div class="m-0 flex-column">
                        <div class="bg-background900 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px; "><span style="color: white">BK900</span>
                            <span style="color: #444545">#F9F9F9</span></div>
                        <div class="bg-background100 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px; border-radius:  0 0 12px 12px "><span style="color: #444545">BK100</span>
                            <span style="color:#444545">#ffffff</span></div>
                    </div>
                </div>


            </div>

        </template>
        <template v-slot:htmcode>
            <div class="bg-background900"></div>
            <div class="bg-background100"></div>
        </template>
    </dfault-vuew>
    <div class=" mt-4 col " style="font-size: 24px">
        Secondary Colors
    </div>
    <div class=" mt-4 col " style="font-size: 16px">
        Secondary Green
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%">
                <div class="col-3">
                    <div class="m-0 flex-column">
                        <div class="bg-secgreen900 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;border-radius: 12px 12px 0 0 "><span style="color: white">SG900</span>
                            <span style="color: white">#52AB98</span></div>
                        <div class="bg-secgreen700 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: white">SG700</span>
                            <span style="color: white">#7EBDAF</span></div>

                        <div class="bg-secgreen500 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;">
                            <span style="color: white">SG500</span>
                            <span style="color: white">#97CDC1</span></div>

                        <div class="bg-secgreen400 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span
                                style="color: white">SG400</span>
                            <span style="color: white">#ABE2D6</span></div>

                        <div class="bg-secgreen200 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span
                                style="color: #488492">SG200</span>
                            <span style="color: #488492">#CAEDE4</span></div>

                        <div class="bg-secgreen100 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;border-radius: 0 0 12px 12px "><span style="color: #488492">SG100</span>
                            <span style="color: #488492">#E2F2EF</span></div>

                    </div>
                </div>
                <div class="col-4 m-0 ">
                    <div class="m-0 flex-column">
                    <div class="br-secgreen900 br-1 br-st mb-1" style="height: 69px;"></div>
                    <div class="br-secgreen700 br-1 br-st mb-1" style="height: 69px;"></div>
                    <div class="br-secgreen500 br-1 br-st mb-1" style="height: 69px;"></div>
                    <div class="br-secgreen400 br-1 br-st mb-1" style="height: 69px;"></div>
                    <div class="br-secgreen200 br-1 br-st mb-1" style="height: 69px;"></div>
                    <div class="br-secgreen100 br-1 br-st mb-1" style="height: 69px; "></div>
                </div>
                </div>
                <div class="col-4 m-0 ">
                    <div class="m-0 flex-column">
                    <div class="ft-secgreen900 " style="height: 69px; text-align: center">Font Color</div>
                    <div class="ft-secgreen700 " style="height: 69px;text-align: center">Font Color</div>
                    <div class="ft-secgreen500 " style="height: 69px;text-align: center">Font Color</div>
                    <div class="ft-secgreen400 " style="height: 69px;text-align: center">Font Color</div>
                    <div class="ft-secgreen200 " style="height: 69px;text-align: center">Font Color</div>
                    <div class="ft-secgreen100 " style="height: 69px;text-align: center">Font Color</div>
                </div>
                </div>


            </div>

        </template>
        <template v-slot:htmcode>
            <div class="bg-secgreen900"></div>
            <div class="bg-secgreen700"></div>
            <div class="bg-secgreen500"></div>
            <div class="bg-secgreen400"></div>
            <div class="bg-secgreen200"></div>
            <div class="bg-secgreen100"></div>
            <div class="br-secgreen900"></div>
            <div class="br-secgreen700"></div>
            <div class="br-secgreen500"></div>
            <div class="br-secgreen400"></div>
            <div class="br-secgreen200"></div>
            <div class="br-secgreen100"></div>
            <div class="ft-secgreen900"></div>
            <div class="ft-secgreen700"></div>
            <div class="ft-secgreen500"></div>
            <div class="ft-secgreen400"></div>
            <div class="ft-secgreen200"></div>
            <div class="ft-secgreen100"></div>
        </template>
    </dfault-vuew>
    <div class=" mt-4 col " style="font-size: 16px">
        Secondary Blue
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%">
                <div class="col-3">
                    <div class="m-0 flex-column">
                        <div class="bg-secblue900 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;border-radius: 12px 12px 0 0 "><span style="color: white">SB900</span>
                            <span style="color: white">#7C8C98</span></div>
                        <div class="bg-secblue700 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: white">SB700</span>
                            <span style="color: white">#AFBFCB</span></div>

                        <div class="bg-secblue500 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;">
                            <span style="color: white">SB500</span>
                            <span style="color: white">#C8D8E4</span></div>

                        <div class="bg-secblue400 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span
                                style="color: white">SB400</span>
                            <span style="color: white">#D9E4EC</span></div>

                        <div class="bg-secblue200 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span
                                style="color: #488492">SB200</span>
                            <span style="color: #488492">#EDF2F6</span></div>

                        <div class="bg-secblue100 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;border-radius: 0 0 12px 12px "><span style="color: #488492">SB100</span>
                            <span style="color: #488492">#F7F8F9</span></div>

                    </div>
                </div>
                <div class="col-4 m-0 ">
                    <div class="m-0 flex-column">
                        <div class="br-secblue900 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-secblue700 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-secblue500 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-secblue400 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-secblue200 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-secblue100 br-1 br-st mb-1" style="height: 69px; "></div>
                    </div>
                </div>
                <div class="col-4 m-0 ">
                    <div class="m-0 flex-column">
                        <div class="ft-secblue900 " style="height: 69px; text-align: center">Font Color</div>
                        <div class="ft-secblue700 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-secblue500 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-secblue400 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-secblue200 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-secblue100 " style="height: 69px;text-align: center">Font Color</div>
                    </div>
                </div>


            </div>

        </template>
        <template v-slot:htmcode>

            <div class="bg-secblue900"></div>
            <div class="bg-secblue700"></div>
            <div class="bg-secblue500"></div>
            <div class="bg-secblue400"></div>
            <div class="bg-secblue200"></div>
            <div class="bg-secblue100"></div>
            <div class="br-secblue900"></div>
            <div class="br-secblue700"></div>
            <div class="br-secblue500"></div>
            <div class="br-secblue400"></div>
            <div class="br-secblue200"></div>
            <div class="br-secblue100"></div>
            <div class="ft-secblue900"></div>
            <div class="ft-secblue700"></div>
            <div class="ft-secblue500"></div>
            <div class="ft-secblue400"></div>
            <div class="ft-secblue200"></div>
            <div class="ft-secblue100"></div>
        </template>
    </dfault-vuew>
    <div class=" mt-4 col " style="font-size: 16px">
        Pink
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%">
                <div class="col-3">
                    <div class="m-0 flex-column">
                        <div class="bg-pink500 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;border-radius: 12px 12px 0 0">
                            <span style="color: white">P500</span>
                            <span style="color: white"> #FFB3C3</span></div>
                        <div class="bg-pink100 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: #F23459">P100</span>
                            <span style="color: #F23459">#FEEBEE</span></div>
                        <div class="bg-pink200 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span
                                style="color: #F23459">P200</span>
                            <span style="color: #F23459"> #FCD6DE</span></div>
                        <div class="bg-pink400 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span
                                style="color: white">P400</span>
                            <span style="color: white">#FFBECC</span></div>

                        <div class="bg-pink700 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: white">P700</span>
                            <span style="color: white">#F6718B</span></div>
                        <div class="bg-pink900 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;border-radius: 0 0 12px 12px  "><span style="color: white">P900</span>
                            <span style="color: white">#F23459</span></div>



                    </div>
                </div>
                <div class="col-4 m-0 ">
                    <div class="m-0 flex-column">
                        <div class="br-pink900 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-pink700 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-pink500 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-pink400 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-pink200 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-pink100 br-1 br-st mb-1" style="height: 69px; "></div>
                    </div>
                </div>
                <div class="col-4 m-0 ">
                    <div class="m-0 flex-column">
                        <div class="ft-pink900 " style="height: 69px; text-align: center">Font Color</div>
                        <div class="ft-pink700 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-pink500 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-pink400 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-pink200 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-pink100 " style="height: 69px;text-align: center">Font Color</div>

                    </div>
                </div>


            </div>

        </template>
        <template v-slot:htmcode>
            <div class="bg-pink900"></div>
            <div class="bg-pink700"></div>
            <div class="bg-pink500"></div>
            <div class="bg-pink400"></div>
            <div class="bg-pink200"></div>
            <div class="bg-pink100"></div>
            <div class="br-pink900"></div>
            <div class="br-pink700"></div>
            <div class="br-pink500"></div>
            <div class="br-pink400"></div>
            <div class="br-pink200"></div>
            <div class="br-pink100"></div>
            <div class="ft-pink900"></div>
            <div class="ft-pink700"></div>
            <div class="ft-pink500"></div>
            <div class="ft-pink400"></div>
            <div class="ft-pink200"></div>
            <div class="ft-pink100"></div>
        </template>
    </dfault-vuew>
    <div class=" mt-4 col " style="font-size: 16px">
        Ocean Blue
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%">
                <div class="col-3">
                    <div class="m-0 flex-column">
                        <div class="bg-oceanblue500 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;border-radius: 12px 12px 0 0">
                            <span style="color: white">OB500</span>
                            <span style="color: white"> #03A9F4</span></div>
                        <div class="bg-oceanblue100 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: #002F6C">OB100</span>
                            <span style="color: #002F6C">#E5F5FD</span></div>
                        <div class="bg-oceanblue200 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span
                                style="color: #002F6C">OB200</span>
                            <span style="color: #002F6C"> #C5E8F9</span></div>
                        <div class="bg-oceanblue400 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span
                                style="color: white">OB400</span>
                            <span style="color: white">#FFBECC</span></div>

                        <div class="bg-oceanblue700 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: white">OB700</span>
                            <span style="color: white">#93D7F8</span></div>
                        <div class="bg-oceanblue900 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;border-radius: 0 0 12px 12px  "><span style="color: white">OB900</span>
                            <span style="color: white">#0288D1</span></div>



                    </div>
                </div>
                <div class="col-4 m-0 ">
                    <div class="m-0 flex-column">
                        <div class="br-oceanblue900 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-oceanblue700 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-oceanblue500 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-oceanblue400 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-oceanblue200 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-oceanblue100 br-1 br-st mb-1" style="height: 69px; "></div>
                    </div>
                </div>
                <div class="col-4 m-0 ">
                    <div class="m-0 flex-column">
                        <div class="ft-oceanblue900 " style="height: 69px; text-align: center">Font Color</div>
                        <div class="ft-oceanblue700 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-oceanblue500 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-oceanblue400 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-oceanblue200 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-oceanblue100 " style="height: 69px;text-align: center">Font Color</div>

                    </div>
                </div>


            </div>

        </template>
        <template v-slot:htmcode>
            <div class="bg-oceanblue900"></div>
            <div class="bg-oceanblue700"></div>
            <div class="bg-oceanblue500"></div>
            <div class="bg-oceanblue400"></div>
            <div class="bg-oceanblue200"></div>
            <div class="bg-oceanblue100"></div>
            <div class="br-oceanblue900"></div>
            <div class="br-oceanblue700"></div>
            <div class="br-oceanblue500"></div>
            <div class="br-oceanblue400"></div>
            <div class="br-oceanblue200"></div>
            <div class="br-oceanblue100"></div>
            <div class="ft-oceanblue900"></div>
            <div class="ft-oceanblue700"></div>
            <div class="ft-oceanblue500"></div>
            <div class="ft-oceanblue400"></div>
            <div class="ft-oceanblue200"></div>
            <div class="ft-oceanblue100"></div>
        </template>
    </dfault-vuew>
    <div class=" mt-4 col " style="font-size: 16px">
        Lavender
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%">
                <div class="col-3">
                    <div class="m-0 flex-column">
                        <div class="bg-lavender500 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;border-radius: 12px 12px 0 0">
                            <span style="color: white">L500</span>
                            <span style="color: white"> #9FA6FF</span></div>
                        <div class="bg-lavender100 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: #232A5C">L100</span>
                            <span style="color: #232A5C">#F9F9FF</span></div>
                        <div class="bg-lavender200 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span
                                style="color: #232A5C">L200</span>
                            <span style="color: #232A5C"> #EBECFF</span></div>
                        <div class="bg-lavender400 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span
                                style="color: white">L400</span>
                            <span style="color: white">#B9BEFF</span></div>

                        <div class="bg-lavender700 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: white">L700</span>
                            <span style="color: white">#6269C5</span></div>
                        <div class="bg-lavender900 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;border-radius: 0 0 12px 12px  "><span style="color: white">L900</span>
                            <span style="color: white">#232A5C</span></div>







                    </div>
                </div>
                <div class="col-4 m-0 ">
                    <div class="m-0 flex-column">
                        <div class="br-lavender900 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-lavender700 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-lavender500 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-lavender400 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-lavender200 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-lavender100 br-1 br-st mb-1" style="height: 69px; "></div>
                    </div>
                </div>
                <div class="col-4 m-0 ">
                    <div class="m-0 flex-column">
                        <div class="ft-lavender900 " style="height: 69px; text-align: center">Font Color</div>
                        <div class="ft-lavender700 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-lavender500 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-lavender400 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-lavender200 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-lavender100 " style="height: 69px;text-align: center">Font Color</div>

                    </div>
                </div>


            </div>

        </template>
        <template v-slot:htmcode>
            <div class="bg-lavender900"></div>
            <div class="bg-lavender700"></div>
            <div class="bg-lavender500"></div>
            <div class="bg-lavender400"></div>
            <div class="bg-lavender200"></div>
            <div class="bg-lavender100"></div>
            <div class="br-lavender900"></div>
            <div class="br-lavender700"></div>
            <div class="br-lavender500"></div>
            <div class="br-lavender400"></div>
            <div class="br-lavender200"></div>
            <div class="br-lavender100"></div>
            <div class="ft-lavender900"></div>
            <div class="ft-lavender700"></div>
            <div class="ft-lavender500"></div>
            <div class="ft-lavender400"></div>
            <div class="ft-lavender200"></div>
            <div class="ft-lavender100"></div>
        </template>
    </dfault-vuew>
    <div class=" mt-4 col " style="font-size: 16px">
        Yellow
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%">
                <div class="col-3">
                    <div class="m-0 flex-column">
                        <div class="bg-yellow500 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;border-radius: 12px 12px 0 0">
                            <span style="color: white">Y500</span>
                            <span style="color: white"> #FFC555</span></div>
                        <div class="bg-yellow100 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: #B24319">Y100</span>
                            <span style="color: #B24319">#FFF6E6</span></div>
                        <div class="bg-yellow200 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span
                                style="color: #B24319">Y200</span>
                            <span style="color: #B24319"> #FFEFCD</span></div>
                        <div class="bg-yellow400 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span
                                style="color: white">Y400</span>
                            <span style="color: white">#FDD88E</span></div>

                        <div class="bg-yellow700 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: white">Y700</span>
                            <span style="color: white">#CE7129</span></div>
                        <div class="bg-yellow900 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;border-radius: 0 0 12px 12px  "><span style="color: white">Y900</span>
                            <span style="color: white">#B24319</span></div>


                    </div>
                </div>
                <div class="col-4 m-0 ">
                    <div class="m-0 flex-column">
                        <div class="br-yellow900 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-yellow700 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-yellow500 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-yellow400 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-yellow200 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-yellow100 br-1 br-st mb-1" style="height: 69px; "></div>
                    </div>
                </div>
                <div class="col-4 m-0 ">
                    <div class="m-0 flex-column">
                        <div class="ft-yellow900 " style="height: 69px; text-align: center">Font Color</div>
                        <div class="ft-yellow700 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-yellow500 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-yellow400 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-yellow200 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-yellow100 " style="height: 69px;text-align: center">Font Color</div>

                    </div>
                </div>


            </div>

        </template>
        <template v-slot:htmcode>
            <div class="bg-yellow900"></div>
            <div class="bg-yellow700"></div>
            <div class="bg-yellow500"></div>
            <div class="bg-yellow400"></div>
            <div class="bg-yellow200"></div>
            <div class="bg-yellow100"></div>
            <div class="br-yellow900"></div>
            <div class="br-yellow700"></div>
            <div class="br-yellow500"></div>
            <div class="br-yellow400"></div>
            <div class="br-yellow200"></div>
            <div class="br-yellow100"></div>
            <div class="ft-yellow900"></div>
            <div class="ft-yellow700"></div>
            <div class="ft-yellow500"></div>
            <div class="ft-yellow400"></div>
            <div class="ft-yellow200"></div>
            <div class="ft-yellow100"></div>
        </template>
    </dfault-vuew>
    <div class=" mt-4 col " style="font-size: 16px">
        Red
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%">
                <div class="col-3">
                    <div class="m-0 flex-column">
                        <div class="bg-red500 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;border-radius: 12px 12px 0 0">
                            <span style="color: white">R500</span>
                            <span style="color: white">#E52628</span></div>
                        <div class="bg-red100 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: #B71C1C">R100</span>
                            <span style="color: #B71C1C">#FFECEC</span></div>
                        <div class="bg-red200 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span
                                style="color: #B71C1C">R200</span>
                            <span style="color: #B71C1C"> #FFDADA</span></div>
                        <div class="bg-red400 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span
                                style="color: white">R400</span>
                            <span style="color: white">#F07B7C</span></div>
                        <div class="bg-red700 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: white">R700</span>
                            <span style="color: white">#D32F2F</span></div>
                        <div class="bg-red900 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;border-radius: 0 0 12px 12px  "><span style="color: white">R900</span>
                            <span style="color: white">#B71C1C</span></div>





                    </div>
                </div>
                <div class="col-4 m-0 ">
                    <div class="m-0 flex-column">
                        <div class="br-red900 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-red700 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-red500 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-red400 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-red200 br-1 br-st mb-1" style="height: 69px;"></div>
                        <div class="br-red100 br-1 br-st mb-1" style="height: 69px; "></div>
                    </div>
                </div>
                <div class="col-4 m-0 ">
                    <div class="m-0 flex-column">
                        <div class="ft-red900 " style="height: 69px; text-align: center">Font Color</div>
                        <div class="ft-red700 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-red500 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-red400 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-red200 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-red100 " style="height: 69px;text-align: center">Font Color</div>

                    </div>
                </div>


            </div>

        </template>
        <template v-slot:htmcode>
            <div class="bg-red900"></div>
            <div class="bg-red700"></div>
            <div class="bg-red500"></div>
            <div class="bg-red400"></div>
            <div class="bg-red200"></div>
            <div class="bg-red100"></div>
            <div class="br-red900"></div>
            <div class="br-red700"></div>
            <div class="br-red500"></div>
            <div class="br-red400"></div>
            <div class="br-red200"></div>
            <div class="br-red100"></div>
            <div class="ft-red900"></div>
            <div class="ft-red700"></div>
            <div class="ft-red500"></div>
            <div class="ft-red400"></div>
            <div class="ft-red200"></div>
            <div class="ft-red100"></div>
        </template>
    </dfault-vuew>
    <div class=" mt-4 col " style="font-size: 16px">
        Red
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%">
                <div class="col-3">
                    <div class="m-0 flex-column">
                        <div class="bg-grassgreen500 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;border-radius: 12px 12px 0 0">
                            <span style="color: white">GG500</span>
                            <span style="color: white">#56C288</span></div>
                        <div class="bg-grassgreen100 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: #003C1C">GG100</span>
                            <span style="color: #003C1C">#EAFFF2</span></div>
                        <div class="bg-grassgreen200 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span
                                style="color: #003C1C">GG200</span>
                            <span style="color: #003C1C"> #D6FCE7</span></div>
                        <div class="bg-grassgreen400 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span
                                style="color: white">GG400</span>
                            <span style="color: white">#39AC6E</span></div>
                        <div class="bg-grassgreen700 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;"><span style="color: white">GG700</span>
                            <span style="color: white">#268C55</span></div>
                        <div class="bg-grassgreen900 p-4 d-flex justify-content-between align-items-center"
                             style="height: 69px;border-radius: 0 0 12px 12px  "><span style="color: white">GG900</span>
                            <span style="color: white">#003C1C</span></div>



                    </div>
                </div>
                <div class="col-4 m-0 ">
                    <div class="m-0 flex-column">
                        <div class="br-grassgreen900 br-1 br-st mb-1 mb-1" style="height: 69px;"></div>
                        <div class="br-grassgreen700 br-1 br-st mb-1 mb-1" style="height: 69px;"></div>
                        <div class="br-grassgreen500 br-1 br-st mb-1 mb-1" style="height: 69px;"></div>
                        <div class="br-grassgreen400 br-1 br-st mb-1 mb-1" style="height: 69px;"></div>
                        <div class="br-grassgreen200 br-1 br-st mb-1 mb-1" style="height: 69px;"></div>
                        <div class="br-grassgreen100 br-1 br-st mb-1 mb-1" style="height: 69px;"></div>
                    </div>
                </div>
                <div class="col-4 m-0 ">
                    <div class="m-0 flex-column">
                        <div class="ft-grassgreen900 " style="height: 69px; text-align: center">Font Color</div>
                        <div class="ft-grassgreen700 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-grassgreen500 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-grassgreen400 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-grassgreen200 " style="height: 69px;text-align: center">Font Color</div>
                        <div class="ft-grassgreen100 " style="height: 69px;text-align: center">Font Color</div>

                    </div>
                </div>


            </div>

        </template>
        <template v-slot:htmcode>
            <div class="bg-grassgreen900"></div>
            <div class="bg-grassgreen700"></div>
            <div class="bg-grassgreen500"></div>
            <div class="bg-grassgreen400"></div>
            <div class="bg-grassgreen200"></div>
            <div class="bg-grassgreen100"></div>

            <div class="br-grassgreen900"></div>
            <div class="br-grassgreen700"></div>
            <div class="br-grassgreen500"></div>
            <div class="br-grassgreen400"></div>
            <div class="br-grassgreen200"></div>
            <div class="br-grassgreen100"></div>

            <div class="ft-grassgreen900"></div>
            <div class="ft-grassgreen700"></div>
            <div class="ft-grassgreen500"></div>
            <div class="ft-grassgreen400"></div>
            <div class="ft-grassgreen200"></div>
            <div class="ft-grassgreen100"></div>
        </template>
    </dfault-vuew>
    <div class=" mt-4 col " style="font-size: 24px">
        Shadows
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%">

                    <div class="col-3 ">
                        <div class="shadows shadows1 m-2 pl-4 d-flex align-items-center">shadows1</div>
                    </div>
                    <div class="col-3  ">
                        <div class="shadows shadows2 m-2 pl-4 d-flex align-items-center">shadows2</div>
                    </div>
                    <div class="col-3  ">
                        <div class="shadows shadows3 m-2 pl-4 d-flex align-items-center">shadows3</div>

                </div>


            </div>

        </template>
        <template v-slot:htmcode>
            <div class="shadows shadows3">shadows3</div>
        </template>
    </dfault-vuew>
</div>


<script src="../js/beautify2.js" type="text/javascript"></script>
<script src="../js/beautify-css2.js" type="text/javascript"></script>
<script src="../js/beautify-html2.js" type="text/javascript"></script>
<script src="../js/highlight.min.js"></script>
<script type="text/javascript">
  var components = {
    template: dfaulthtml,
    props: {
      layout: {
        default: 1,
      }
    },
    data: function () {
      return {
        idShowCode: false,
        codeHtml: ''
      }
    },
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },
  };
  new Vue({
    el: "#childApp",
    components: {'DfaultVuew': components},
    data: function () {
      return {
        idShowCode: false
      };
    },
    beforeCreate(){
      pageBeforeCreate();
    },
    computed: {},
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },

  });
</script>
<script src="../js/cods.js"></script>
</body>
</html>